{% extends "base.html" %}
{% load url from future %}

{% block title %}{{ SITE_NAME }} | Регистрация{% endblock %}

{% block page-header-block %}
    <div class="page-header"><h1>Регистрация</h1></div>
{% endblock page-header-block %}

{% block breadcrumb %}
<div class="hgroup">
    <ul class="breadcrumb pull-right">
        <li><a href="{% url 'home' %}">Главная</a> <span class="divider">/</span></li>
        <li class="active">Регистрация</li>
    </ul>
</div>
{% endblock breadcrumb %}

{% block content %}
<div class="col-lg-5">
    <form class="form-horizontal" method="post" action="{% url 'userprofiles_registration' %}">
        {% csrf_token %}
        {% if form.non_field_errors %}
            <div class="alert alert-danger" style="margin-top:10px;">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <p>{{ form.non_field_errors|join:", " }}</p>
            </div>
        {% endif %}

        <div class="form-group{% if form.firstname.errors %} has-error{% endif %}">
            <label class="control-label col-lg-6" for="{{ form.firstname.id_for_label }}">{{ form.firstname.label }}</label>
                <div class="input-group col-lg-6">
                    <span class="input-group-addon">
                        <i class="icon-user"></i>
                    </span>
                    <input maxlength="{{ form.fields.firstname.max_length }}" name="{{ form.firstname.html_name }}" id="{{ form.firstname.id_for_label }}" type="text" class="form-control"{% if form.firstname.value %} value="{{ form.firstname.value }}"{% endif %} required autofocus {% if form.firstname.errors %}placeholder="{{ form.firstname.help_text }}"{% endif %}>
                </div>
            <span class="help-block pull-right">{% if form.firstname.errors %}{{ form.firstname.errors|join:", " }}{% endif %}</span>
        </div>

        <div class="form-group{% if form.lastname.errors %} has-error{% endif %}">
            <label class="control-label col-lg-6" for="{{ form.lastname.id_for_label }}">{{ form.lastname.label }}</label>
                <div class="input-group col-lg-6">
                    <span class="input-group-addon">
                        <i class="icon-user"></i>
                    </span>
                    <input maxlength="{{ form.fields.lastname.max_length }}" name="{{ form.lastname.html_name }}" id="{{ form.lastname.id_for_label }}" type="text" class="form-control"{% if form.lastname.value %} value="{{ form.lastname.value }}"{% endif %} required {% if form.firstname.errors %}placeholder="{{ form.lastname.help_text }}"{% endif %}>
                </div>
            <span class="help-block pull-right">{% if form.lastname.errors %}{{ form.lastname.errors|join:", " }}{% endif %}</span>
        </div>

        <div class="form-group{% if form.email.errors %} has-error{% endif %}">
            <label class="control-label col-lg-6" for="{{ form.email.id_for_label }}">{{ form.email.label }}</label>
                <div class="input-group col-lg-6">
                    <span class="input-group-addon">
                        <i class="icon-envelope"></i>
                    </span>
                    <input name="{{ form.email.html_name }}" id="{{ form.email.id_for_label }}" maxlength="{{ form.fields.email.max_length }}" type="text" class="form-control"{% if form.email.value %} value="{{ form.email.value }}"{% endif %} required {% if form.email.errors %}placeholder="{{ form.email.help_text }}"{% endif %}>
                </div>
            <span class="help-block pull-right">{% if form.email.errors %}{{ form.email.errors|join:", " }}{% endif %}</span>
        </div>

        <div class="form-group {% if form.password.errors %}has-error{% endif %}">
                <label for="{{ form.password.id_for_label }}" class="control-label col-lg-5 col-lg-offset-1">{{ form.password.label }}</label>
            <div class="input-group col-lg-6">
                <span class="input-group-addon">
                    <i class="icon-lock"></i>
                </span>
                <input id="{{ form.password.id_for_label }}" name="{{ form.password.html_name }}" type="password" class="form-control col-lg-3" required {% if form.password.errors %}placeholder="{{ form.password.help_text }}"{% endif %}>
            </div>
            <span class="help-block pull-right">{% if form.password.errors %}{{ form.password.errors|join:", " }}{% endif %}</span>
        </div>

        <div class="form-group {% if form.password_repeat.errors %}has-error{% endif %}">
                <label for="{{ form.password_repeat.id_for_label }}" class="control-label col-lg-5 col-lg-offset-1">{{ form.password_repeat.label }}</label>
            <div class="input-group col-lg-6">
                <span class="input-group-addon">
                    <i class="icon-lock"></i>
                </span>
                <input id="{{ form.password_repeat.id_for_label }}" name="{{ form.password_repeat.html_name }}" type="password" class="form-control col-lg-3" required {% if form.password_repeat.errors %}placeholder="{{ form.password_repeat.help_text }}"{% endif %}>
            </div>
            <span class="help-block pull-right">{% if form.password_repeat.errors %}{{ form.password_repeat.errors|join:", " }}{% endif %}</span>
        </div>


        <div class="form-actions pull-right">
            <button type="submit" class="btn btn-primary"><i class="icon-user icon-white"></i> Зарегистрироваться</button>
            <a href="#" id="button_toggle" class="btn btn-default"><i class="icon-question-sign icon-white"></i> Помощь <i class="icon-double-angle-right"></i></a>
        </div>

        <div class="col-lg-11 col-lg-offset-1" style="margin-top: 10px;">
            <p><a href="{% url "auth_login" %}"><i class="icon-forward"></i> Я уже зарегистрирован!</a></p>
        </div>

    </form>
</div> <!-- <div class="col-lg-5"> -->

<div id="shown_block" class="col-lg-4 col-lg-offset-1" style="display: none;">
    <div class="panel panel-warning" >
        <div class="panel-heading">
            <h3 class="panel-title">Зачем мне регистрироваться?</h3>
        </div>
        <div class="panel-body">
            Вороне где-то бог послал кусочек сыру;
        ‎На ель Ворона взгромоздясь,
        Позавтракать было совсем уж собралась,
        ‎Да позадумалась, а сыр во рту держала.
        ‎На ту беду, Лиса близехонько бежала;
        ‎Вдруг сырный дух Лису остановил:
        Лисица видит сыр, — Лисицу сыр пленил,
        Плутовка к дереву на цыпочках подходит;
        Вертит хвостом, с Вороны глаз не сводит
        ‎И говорит так сладко, чуть дыша:
        ‎«Голубушка, как хороша!
        ‎Ну что за шейка, что за глазки!
        ‎Рассказывать, так, право, сказки!
        ‎Какие перышки! какой носок!
        </div>
    </div>
</div> <!-- id="shown_block" -->

{% endblock %}
